import { useEffect, useRef, useState } from 'react';
import './order.css';
import axios from 'axios';
function App() {
  let alipayForm = useRef();
  let [code, setCode] = useState();

  useEffect(() => {
    axios.post('http://localhost:3010/svgCode').then((res) => {
      console.log(res);
      setCode(res.data.data);
    });
  }, []);
  
  return (
    <>
      {/* dangerouslySetInnerHTM 富文本渲染 "<h1>123123</h1>" */}
      <div dangerouslySetInnerHTML={{ __html: code }} />
      <div ref={alipayForm}>{/* form表单 */}</div>
      <button
        onClick={async () => {
          let res = await axios.post('http://localhost:3010/alipay');

          alipayForm.current.innerHTML = res.data;
          // 主动调用form表单
          // document.forms 获取当前页面所有的表单集合
          document.forms[0].submit();
        }}
      >
        支付
      </button>
      <div className='zfb'>
        ssdasf
      </div>
    </>
  );
}

export default App;
